<template>
    <div class="yorha-checkbox">
        <input type="checkbox" v-model="flag" :name="name" :value="value">
        <div :class="['box',(flag?'active':'')]"></div>
        <div class="text">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import {ref, watch} from "vue";

let props = defineProps(['name','value'])
let emits = defineEmits(['change'])

let flag = ref(false)

watch(flag,value => {
    emits('change',flag.value)
})

</script>

<script>
export default {name:"YorhaCheckBox"}
</script>

<style lang="less" scoped>
@import "../../style";
.yorha-checkbox {
    display: inline-block;
    width: auto;
    height: 24px;
    margin-right: 5px;
    position: relative;
    &>input[type=checkbox] {
        width: 18px;
        height: 18px;
        opacity: 0;
        margin: 0;
        position: absolute;
        left: 3px;
        top: 3px;
    }
    &>.box {
        display: inline-block;
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        margin: 3px;
        border: 3px @gray solid;
        background: @yellow;
        transition: all 300ms ease-in-out;
        pointer-events: none;
        &:hover {
            border-width: 9px;
        }
        &.active {
            border-width: 9px;
        }
    }

    &>.text {
        display: inline-block;
        //margin-top: 3px;
        color: @gray;
        font-size: 18px;
        position: relative;
        margin-left: 4px;
        bottom: 5px;
    }
}
</style>